<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="aui-fullpage">
  <div class="aui-header-1">
    <lv-group lvGutter="8px">
      <h1>
        {{ 'common_alarms_events_label' | i18n }}
        <i
          lv-icon="aui-icon-help"
          [lv-tooltip]="alarmHelpTpl"

          lvTooltipPosition="right"
          class="configform-constraint alarm-help"
          lvColorState="true"
          (mouseenter)="alarmHelpHover()"
        ></i>
      </h1>
      <aui-multi-cluster-switch
        (onChange)="onChange()"
      ></aui-multi-cluster-switch>
    </lv-group>
  </div>
  <div class="aui-block aui-paginator-container custom-main-tab">
    <lv-tabs
      [(lvActiveIndex)]="activeIndex"
      (lvActiveIndexChange)="afterChange($event)"
      [lvBeforeChange]="beforeChange"
      class="aui-tab"
      lvType="card"
    >
      <lv-tab [lvTitle]="alarm" [lvId]="alarmEventType.ALARM">
        <ng-template lv-tab-lazy>
          <lv-group
            *ngIf="isDataBackup"
            [lvColumns]="['260px', 'auto']"
            lvGutter="16px"
            style="height: 100%;align-items: flex-start;"
          >
            <lv-group lvDirection="vertical" lvGutter="8px" class="left-menus">
              <h3>{{ 'protection_statefulset_node_label' | i18n }}</h3>
              <lv-group lvGutter="16px">
                <lv-search
                  [lvFocus]="true"
                  [(ngModel)]="nodeName"
                  (lvSearch)="search()"
                >
                </lv-search>
                <button
                  class="aui-button-icon"
                  lv-button
                  lvSize="auto"
                  (click)="refresh()"
                >
                  <i lv-icon="lv-icon-refresh" [lvColorState]="true"></i>
                </button>
              </lv-group>
              <div class="cluster-menus custom-cluster-menus">
                <lv-menu
                  [lvMenus]="clusterMenus"
                  [lvMode]="'icon'"
                  [lvTheme]="'light'"
                  [lvActiveItemId]="activeNode"
                  [lvLabelTemplate]="clusterNodeTpl"
                  (lvItemClick)="nodeChange($event)"
                ></lv-menu>
              </div>
            </lv-group>
            <div class="aui-block insight-padding-none">
              <div class="aui-operation alarms-operation">
                <button
                  lv-button
                  lvType="primary"
                  [disabled]="
                    !alarmsTable.getSelection() ||
                    alarmsTable.getSelection().length < 1
                  "
                  (click)="clearAlarms()"
                >
                  <span>{{ clear }}</span>
                </button>
                <div class="insight-export-alarm">
                  <i
                    lv-icon="aui-icon-export-extra"
                    [lvColorState]="true"
                    (click)="exportCurrentAlarms()"
                    lv-tooltip="{{ exportAlarmTipLabel }}"
                    lvTooltipPosition="bottom"

                  ></i>
                </div>
              </div>
              <div class="list-container">
                <div class="tags-container" *ngIf="apiFilters?.length">
                  <lv-tag
                    [(ngModel)]="apiFilters"
                    (lvClearAll)="handleTagsclearAll($event)"
                    (lvRemove)="handleTagRemove($event)"
                    lvShowClearAll
                  ></lv-tag>
                </div>
                <lv-datatable
                  [lvData]="alarmsData"
                  #alarmsTable
                  [lvSelection]="alarmsSections"
                  lvSelectionMode="multiple"
                  (lvSelectionChange)="selectionAlarmChange($event)"
                  lvCompareWith="sequence"
                  lvResizeMode="expand"
                  lvResize
                  [lvScroll]="{ x: '100%' }"
                >
                  <thead>
                    <tr>
                      <th
                        lvShowCheckbox
                        width="40px"
                        [lvRowsData]="alarmsTable.renderData"
                      ></th>
                      <ng-container *ngFor="let item of alarmCols">
                        <th
                          *ngIf="
                            item.isShow &&
                            item.key != 'severity' &&
                            item.key != 'sourceType' &&
                            item.key !== 'objType' &&
                            item.key != 'alarmTimeStr' &&
                            item.key !== 'firstTimeStr' &&
                            item.key != 'alarmId' &&
                            item.key !== 'deviceName'
                          "
                          lvCellKey="{{ item.key }}"
                          [width]="item.width"
                        >
                          <span>{{ item.label }}</span>
                        </th>
                        <th
                          *ngIf="item.isShow && item.key == 'severity'"
                          lvCellKey="{{ item.key }}"
                          lvShowFilter
                          [(lvFilters)]="item.filterMap"
                          (lvFilterChange)="alarmFilterChange($event)"
                          [lvFilterMultiple]="isCyberEngine"
                          lvFilterCheckAll
                          [width]="item.width"
                        >
                          <span>{{ item.label }}</span>
                        </th>

                        <th
                          *ngIf="item.isShow && item.key == 'deviceName'"
                          lvCellKey="{{ item.key }}"
                          lvShowFilter
                          [(lvFilters)]="item.filterMap"
                          (lvFilterChange)="alarmDeviceChange($event)"
                          [lvFilterMultiple]="isCyberEngine"
                          lvFilterCheckAll
                          [width]="item.width"
                        >
                          <span>{{ item.label }}</span>
                        </th>
                        <!-- 告警对象过滤 -->
                        <th
                          *ngIf="item.isShow && item.key == 'sourceType'"
                          lvCellKey="{{ item.key }}"
                          lvShowFilter
                          [(lvFilters)]="item.filterMap"
                          (lvFilterChange)="alarmObjectFilterChange($event)"
                          lvFilterCheckAll
                          lvFilterSearch
                        >
                          {{ item.label }}
                        </th>

                        <th
                          *ngIf="item.isShow && item.key == 'objType'"
                          lvCellKey="{{ item.key }}"
                          lvShowFilter
                          [(lvFilters)]="item.filterMap"
                          (lvFilterChange)="alarmObjectFilterChange($event)"
                          [lvFilterMultiple]="false"
                          lvFilterCheckAll
                          lvFilterSearch
                        >
                          {{ item.label }}
                        </th>
                        <!-- 发生时间过滤  -->
                        <th
                          *ngIf="item.isShow && item.key === 'alarmTimeStr'"
                          lvCellKey="{{ item.key }}"
                          lvShowCustom
                        >
                          {{ item.label }}
                          <div lvCustom>
                            <i
                              lv-icon="lv-icon-filter"
                              [ngClass]="{
                                active: dateMap.begin && dateMap.end
                              }"
                              #datePopover="lvPopover"
                              lv-popover
                              lvPopoverPosition="bottom"
                              [lvPopoverContent]="dateFilterTpl"

                              lvPopoverTrigger="click"
                              [lvPopoverScrollToClose]="false"
                            ></i>
                          </div>
                        </th>
                        <!-- 发生时间过滤  -->
                        <th
                          *ngIf="item.isShow && item.key === 'firstTimeStr'"
                          lvCellKey="{{ item.key }}"
                          lvShowCustom
                        >
                          {{ item.label }}
                          <div lvCustom>
                            <i
                              lv-icon="lv-icon-filter"
                              [ngClass]="{
                                active: dateMap.begin && dateMap.end
                              }"
                              #datePopover="lvPopover"
                              lv-popover
                              lvPopoverPosition="bottom"
                              [lvPopoverContent]="dateFilterTpl"

                              lvPopoverTrigger="click"
                              [lvPopoverScrollToClose]="false"
                            ></i>
                          </div>
                        </th>
                        <th
                          *ngIf="item.isShow && item.key === 'alarmId'"
                          lvCellKey="{{ item.key }}"
                          lvShowCustom
                        >
                          {{ item.label }}
                          <div lvCustom>
                            <aui-custom-table-search
                              (search)="searchByAlarmId($event)"
                              [filterTitle]="item.label"
                            ></aui-custom-table-search>
                          </div>
                        </th>
                      </ng-container>
                      <th width="16px" style="padding: 0;" lvResizable="false">
                        <i
                          lv-icon="lv-icon-col-setting"
                          #colPopover="lvPopover"
                          lv-popover
                          lvPopoverPosition="bottomRight"
                          [lvPopoverContent]="colSelectTp"

                          lvPopoverTrigger="click"
                          style="cursor: pointer;"
                        >
                        </i>
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <ng-container
                      *ngFor="
                        let item of alarmsTable.renderData;
                        trackBy: trackById
                      "
                    >
                      <tr>
                        <td lvShowCheckbox [lvRowData]="item" width="40px"></td>
                        <ng-container *ngFor="let col of alarmCols">
                          <td
                            *ngIf="col.isShow"
                            class="insight-severity-control"
                            [width]="col.width"
                          >
                            <span
                              *ngIf="
                                col.key != 'severity' &&
                                col.key != 'description' &&
                                col.key != 'sourceType' &&
                                col.key != 'desc'
                              "
                              lv-overflow

                              >{{ item[col.key] | nil }}</span
                            >
                            <span *ngIf="col.key == 'severity'">
                              <alarm-level [type]="item.severity"></alarm-level>
                            </span>
                            <span *ngIf="col.key == 'sourceType'" lv-overflow>
                              {{ item[col.key] | i18n }}
                            </span>
                            <span
                              id="outerClosable"
                              *ngIf="col.key == 'description'"
                              lv-overflow

                              class="aui-link"
                              (click)="openDetailModal(item)"
                              innerHTML="{{
                                i18n.get(item.description, item.params || [])
                              }}"
                            >
                            </span>
                            <span
                              id="outerClosable"
                              *ngIf="col.key == 'desc'"
                              lv-overflow

                              class="aui-link"
                              (click)="openDetailModal(item)"
                              innerHTML="{{
                                i18n.get(item.desc, item.params || [])
                              }}"
                            >
                            </span>
                          </td>
                        </ng-container>
                        <td width="20px"></td>
                      </tr>
                    </ng-container>
                  </tbody>
                </lv-datatable>
              </div>
              <div class="aui-paginator-wrap">
                <lv-paginator
                  #alarmsPage
                  [lvPageIndex]="alarmStartPage"
                  [lvPageSize]="alarmPageSize"
                  [lvTotal]="alarmTotalCount"
                  (lvPageChange)="alarmPageChange($event)"
                  [lvPageSizeOptions]="alarmSizeOptions"
                  [hidden]="!alarmTotalCount"
                >
                </lv-paginator>
              </div>
            </div>
          </lv-group>
          <div class="aui-block insight-padding-none" *ngIf="!isDataBackup">
            <div class="aui-operation alarms-operation">
              <lv-group>
                <button
                  lv-button
                  pmpermission
                  pmOperation="ClearAlarm"
                  lvType="primary"
                  [disabled]="
                    !alarmsTable.getSelection() ||
                    alarmsTable.getSelection().length < 1
                  "
                  (click)="clearAlarms()"
                >
                  <span>{{ clear }}</span>
                </button>
              </lv-group>
              <lv-group>
                <div class="insight-export" *ngIf="isDecouple || isDistributed">
                  <i
                    lv-icon="aui-icon-export-extra"
                    [lvColorState]="true"
                    (click)="exportCurrentAlarms()"
                    lv-tooltip="{{ exportAlarmTipLabel }}"
                    lvTooltipPosition="bottom"

                  ></i>
                </div>
                <div class="insight-refresh">
                  <i
                    lv-icon="lv-icon-refresh"
                    [lvColorState]="true"
                    (click)="refreshAlarms()"
                  ></i>
                </div>
              </lv-group>
            </div>
            <div class="list-container">
              <div class="tags-container" *ngIf="apiFilters?.length">
                <lv-tag
                  [(ngModel)]="apiFilters"
                  (lvClearAll)="handleTagsclearAll($event)"
                  (lvRemove)="handleTagRemove($event)"
                  lvShowClearAll
                ></lv-tag>
              </div>
              <lv-datatable
                [lvData]="alarmsData"
                #alarmsTable
                [lvSelection]="alarmsSections"
                lvSelectionMode="multiple"
                (lvSelectionChange)="selectionAlarmChange($event)"
                lvCompareWith="sequence"
                lvResizeMode="expand"
                lvResize
                [lvScroll]="{ x: '100%' }"
              >
                <thead>
                  <tr>
                    <th
                      lvShowCheckbox
                      width="40px"
                      [lvRowsData]="alarmsTable.renderData | selectionEnable"
                    ></th>
                    <ng-container *ngFor="let item of alarmCols">
                      <th
                        *ngIf="
                          item.isShow &&
                          item.key != 'severity' &&
                          item.key != 'sourceType' &&
                          item.key !== 'objType' &&
                          item.key != 'alarmTimeStr' &&
                          item.key !== 'firstTimeStr' &&
                          item.key != 'alarmId' &&
                          item.key !== 'deviceName'
                        "
                        lvCellKey="{{ item.key }}"
                        [width]="item.width"
                      >
                        <span>{{ item.label }}</span>
                      </th>
                      <th
                        *ngIf="item.isShow && item.key == 'severity'"
                        lvCellKey="{{ item.key }}"
                        lvShowFilter
                        [(lvFilters)]="item.filterMap"
                        (lvFilterChange)="alarmFilterChange($event)"
                        [lvFilterMultiple]="isCyberEngine"
                        lvFilterCheckAll
                        [width]="item.width"
                      >
                        <span>{{ item.label }}</span>
                      </th>

                      <th
                        *ngIf="item.isShow && item.key == 'deviceName'"
                        lvCellKey="{{ item.key }}"
                        lvShowFilter
                        [(lvFilters)]="item.filterMap"
                        (lvFilterChange)="alarmDeviceChange($event)"
                        [lvFilterMultiple]="isCyberEngine"
                        lvFilterCheckAll
                        [width]="item.width"
                      >
                        <span>{{ item.label }}</span>
                      </th>
                      <!-- 告警对象过滤 -->
                      <th
                        *ngIf="item.isShow && item.key == 'sourceType'"
                        lvCellKey="{{ item.key }}"
                        lvShowFilter
                        [(lvFilters)]="item.filterMap"
                        (lvFilterChange)="alarmObjectFilterChange($event)"
                        lvFilterCheckAll
                        lvFilterSearch
                      >
                        {{ item.label }}
                      </th>

                      <th
                        *ngIf="item.isShow && item.key == 'objType'"
                        lvCellKey="{{ item.key }}"
                        lvShowFilter
                        [(lvFilters)]="item.filterMap"
                        (lvFilterChange)="alarmObjectFilterChange($event)"
                        [lvFilterMultiple]="false"
                        lvFilterCheckAll
                        lvFilterSearch
                      >
                        {{ item.label }}
                      </th>
                      <!-- 发生时间过滤  -->
                      <th
                        *ngIf="item.isShow && item.key === 'alarmTimeStr'"
                        lvCellKey="{{ item.key }}"
                        lvShowCustom
                      >
                        {{ item.label }}
                        <div lvCustom>
                          <i
                            lv-icon="lv-icon-filter"
                            [ngClass]="{ active: dateMap.begin && dateMap.end }"
                            #datePopover="lvPopover"
                            lv-popover
                            lvPopoverPosition="bottom"
                            [lvPopoverContent]="dateFilterTpl"

                            lvPopoverTrigger="click"
                            [lvPopoverScrollToClose]="false"
                          ></i>
                        </div>
                      </th>
                      <!-- 发生时间过滤  -->
                      <th
                        *ngIf="item.isShow && item.key === 'firstTimeStr'"
                        lvCellKey="{{ item.key }}"
                        lvShowCustom
                      >
                        {{ item.label }}
                        <div lvCustom>
                          <i
                            lv-icon="lv-icon-filter"
                            [ngClass]="{ active: dateMap.begin && dateMap.end }"
                            #datePopover="lvPopover"
                            lv-popover
                            lvPopoverPosition="bottom"
                            [lvPopoverContent]="dateFilterTpl"

                            lvPopoverTrigger="click"
                            [lvPopoverScrollToClose]="false"
                          ></i>
                        </div>
                      </th>
                      <th
                        *ngIf="item.isShow && item.key === 'alarmId'"
                        lvCellKey="{{ item.key }}"
                        lvShowCustom
                      >
                        {{ item.label }}
                        <div lvCustom>
                          <aui-custom-table-search
                            (search)="searchByAlarmId($event)"
                            [filterTitle]="item.label"
                          ></aui-custom-table-search>
                        </div>
                      </th>
                    </ng-container>
                    <th width="16px" style="padding: 0;" lvResizable="false">
                      <i
                        lv-icon="lv-icon-col-setting"
                        #colPopover="lvPopover"
                        lv-popover
                        lvPopoverPosition="bottomRight"
                        [lvPopoverContent]="colSelectTp"

                        lvPopoverTrigger="click"
                        style="cursor: pointer;"
                      >
                      </i>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <ng-container
                    *ngFor="
                      let item of alarmsTable.renderData;
                      trackBy: trackById
                    "
                  >
                    <tr>
                      <td
                        lvShowCheckbox
                        [lvRowData]="item"
                        width="40px"
                        [lvDisabled]="
                          item.sourceType === 'operation_target_ibmc_label' &&
                          isCyberEngine
                        "
                      ></td>
                      <ng-container *ngFor="let col of alarmCols">
                        <td
                          *ngIf="col.isShow"
                          class="insight-severity-control"
                          [width]="col.width"
                        >
                          <span
                            *ngIf="
                              col.key != 'severity' &&
                              col.key != 'description' &&
                              col.key != 'sourceType' &&
                              col.key != 'desc'
                            "
                            lv-overflow

                            >{{ item[col.key] | nil }}</span
                          >
                          <span *ngIf="col.key == 'severity'">
                            <alarm-level [type]="item.severity"></alarm-level>
                          </span>
                          <span *ngIf="col.key == 'sourceType'" lv-overflow>
                            {{ item[col.key] | i18n }}
                          </span>
                          <span
                            id="outerClosable"
                            *ngIf="col.key == 'description'"
                            lv-overflow

                            class="aui-link"
                            (click)="openDetailModal(item)"
                            innerHTML="{{
                              i18n.get(item.description, item.params || [])
                            }}"
                          >
                          </span>
                          <span
                            id="outerClosable"
                            *ngIf="col.key == 'desc'"
                            lv-overflow

                            class="aui-link"
                            (click)="openDetailModal(item)"
                            innerHTML="{{
                              i18n.get(item.desc, item.params || [])
                            }}"
                          >
                          </span>
                        </td>
                      </ng-container>
                      <td width="20px"></td>
                    </tr>
                  </ng-container>
                </tbody>
              </lv-datatable>
            </div>
            <div class="aui-paginator-wrap">
              <lv-paginator
                #alarmsPage
                [lvPageIndex]="alarmStartPage"
                [lvPageSize]="alarmPageSize"
                [lvTotal]="alarmTotalCount"
                (lvPageChange)="alarmPageChange($event)"
                [lvPageSizeOptions]="alarmSizeOptions"
                [hidden]="!alarmTotalCount"
              >
              </lv-paginator>
            </div>
          </div>
        </ng-template>
      </lv-tab>
      <lv-tab [lvTitle]="event" [lvId]="alarmEventType.EVENT">
        <ng-template lv-tab-lazy>
          <div class="aui-block insight-padding-none">
            <div class="aui-operation insight-block-right">
              <lv-group>
                <div class="insight-export">
                  <i
                    lv-icon="aui-icon-export-extra"
                    [lvColorState]="true"
                    (click)="exportHistoryAlarms()"
                    lv-tooltip="{{ exportEventTipLabel }}"
                    lvTooltipPosition="bottom"

                  ></i>
                </div>
                <div class="insight-refresh">
                  <i
                    lv-icon="lv-icon-refresh"
                    [lvColorState]="true"
                    (click)="refreshEvent()"
                  ></i>
                </div>
              </lv-group>
            </div>
            <div class="list-container">
              <aui-filter-tags
                [filterMap]="eventFilters"
                [tableCols]="eventCols"
                (clearCertainTag)="clearEventTag($event)"
                (clearAllTag)="clearAllEventTag()"
                *ngIf="isHyperDetect"
              ></aui-filter-tags>
              <lv-datatable
                [lvData]="eventsData"
                lvSelectionMode="multiple"
                #eventsTable
                [lvSelection]="eventsSections"
                (lvSelectionChange)="selectionEventChange($event)"
                lvCompareWith="entityId"
                lvResizeMode="expand"
                lvResize
                [lvScroll]="{ x: '100%' }"
              >
                <thead>
                  <tr>
                    <th
                      lvShowCheckbox
                      width="40px"
                      [lvRowsData]="eventsTable.renderData"
                    ></th>
                    <ng-container *ngFor="let item of eventCols">
                      <th
                        *ngIf="
                          item.isShow &&
                          item.key != 'severity' &&
                          item.key != 'type' &&
                          item.key != 'confirmStatus' &&
                          item.key != 'sourceType' &&
                          item.key != 'firstTimeStr' &&
                          item.key != 'deviceName' &&
                          item.key != 'nodeName' &&
                          item.key != 'alarmId'
                        "
                        lvCellKey="{{ item.key }}"
                        [width]="item.width"
                      >
                        <span>{{ item.label }}</span>
                      </th>

                      <th
                        *ngIf="item.isShow && item.key == 'deviceName'"
                        lvCellKey="{{ item.key }}"
                        lvShowFilter
                        [(lvFilters)]="item.filterMap"
                        (lvFilterChange)="alarmDeviceChange($event)"
                        [lvFilterMultiple]="isCyberEngine"
                        lvFilterCheckAll
                        [width]="item.width"
                      >
                        <span>{{ item.label }}</span>
                      </th>
                      <th
                        *ngIf="
                          item.isShow && item.filter && item.key == 'severity'
                        "
                        lvCellKey="{{ item.key }}"
                        lvShowFilter
                        [(lvFilters)]="item.filterMap"
                        (lvFilterChange)="eventFilterChange($event)"
                        [width]="item.width"
                        lvFilterCheckAll
                      >
                        <span>{{ item.label }}</span>
                      </th>
                      <th
                        *ngIf="item.isShow && item.filter && item.key == 'type'"
                        lvCellKey="{{ item.key }}"
                        lvShowFilter
                        [(lvFilters)]="item.filterMap"
                        (lvFilterChange)="eventFilterChange($event)"
                        lvFilterCheckAll
                      >
                        <span>{{ item.label }}</span>
                      </th>
                      <!-- 告警对象过滤 -->
                      <th
                        *ngIf="item.isShow && item.key == 'sourceType'"
                        lvCellKey="{{ item.key }}"
                        lvShowFilter
                        [(lvFilters)]="item.filterMap"
                        (lvFilterChange)="eventFilterChange($event)"
                        lvFilterCheckAll
                        lvFilterSearch
                      >
                        {{ item.label }}
                      </th>
                      <!-- 发生时间过滤  -->
                      <th
                        *ngIf="item.isShow && item.key === 'firstTimeStr'"
                        lvCellKey="{{ item.key }}"
                        lvShowCustom
                      >
                        {{ item.label }}
                        <div lvCustom>
                          <i
                            lv-icon="lv-icon-filter"
                            [ngClass]="{ active: dateMap.begin && dateMap.end }"
                            #datePopover="lvPopover"
                            lv-popover
                            lvPopoverPosition="bottom"
                            [lvPopoverContent]="dateFilterTpl"

                            lvPopoverTrigger="click"
                            [lvPopoverScrollToClose]="false"
                          ></i>
                        </div>
                      </th>
                      <!-- 状态过滤 -->
                      <th
                        *ngIf="
                          item.isShow &&
                          item.filter &&
                          item.key == 'confirmStatus'
                        "
                        lvCellKey="{{ item.key }}"
                        lvShowFilter
                        [(lvFilters)]="item.filterMap"
                        (lvFilterChange)="eventFilterChange($event)"
                        lvFilterCheckAll
                      >
                        <span>{{ item.label }}</span>
                      </th>
                      <th
                        *ngIf="item.isShow && item.key === 'nodeName'"
                        lvCellKey="{{ item.key }}"
                        lvShowCustom
                      >
                        {{ item.label }}
                        <div lvCustom>
                          <aui-custom-table-search
                            (search)="searchByNodeNameId($event)"
                            [filterTitle]="item.label"
                          ></aui-custom-table-search>
                        </div>
                      </th>
                      <th
                        *ngIf="item.isShow && item.key === 'alarmId'"
                        lvCellKey="{{ item.key }}"
                        lvShowCustom
                      >
                        {{ item.label }}
                        <div lvCustom>
                          <aui-custom-table-search
                            (search)="searchByAlarmId($event)"
                            [filterTitle]="item.label"
                          ></aui-custom-table-search>
                        </div>
                      </th>
                    </ng-container>
                    <th width="16px" style="padding: 0;" lvResizable="false">
                      <i
                        lv-icon="lv-icon-col-setting"
                        #colPopover="lvPopover"
                        lv-popover
                        lvPopoverPosition="bottomRight"
                        [lvPopoverContent]="colSelectTp"

                        lvPopoverTrigger="click"
                        style="cursor: pointer;"
                      >
                      </i>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <ng-container
                    *ngFor="
                      let item of eventsTable.renderData;
                      trackBy: trackById
                    "
                  >
                    <tr>
                      <td lvShowCheckbox [lvRowData]="item" width="40px"></td>
                      <ng-container *ngFor="let col of eventCols">
                        <td
                          *ngIf="col.isShow"
                          class="insight-severity-control"
                          [width]="col.width"
                        >
                          <span
                            *ngIf="
                              col.key != 'severity' &&
                              col.key != 'desc' &&
                              col.key != 'sourceType'
                            "
                            lv-overflow

                            >{{ item[col.key] | nil }}</span
                          >
                          <span *ngIf="col.key == 'severity'">
                            <alarm-level [type]="item.severity"></alarm-level>
                          </span>
                          <span *ngIf="col.key == 'sourceType'" lv-overflow>
                            {{ item[col.key] | i18n }}
                          </span>
                          <span
                            id="outerClosable"
                            *ngIf="col.key == 'desc'"
                            lv-overflow

                            class="aui-link"
                            (click)="openDetailModal(item)"
                          >
                            {{ i18n.get(item.desc, item.params || []) }}
                          </span>
                        </td>
                      </ng-container>
                      <td width="20px"></td>
                    </tr>
                  </ng-container>
                </tbody>
              </lv-datatable>
            </div>
            <div class="aui-paginator-wrap">
              <lv-paginator
                #eventsPage
                [lvPageIndex]="eventStartPage"
                [lvPageSize]="eventPageSize"
                [lvTotal]="eventTotalCount"
                (lvPageChange)="eventPageChange($event)"
                [lvPageSizeOptions]="eventSizeOptions"
                [hidden]="!eventTotalCount"
              >
              </lv-paginator>
            </div>
          </div>
        </ng-template>
      </lv-tab>
    </lv-tabs>
  </div>
</div>

<ng-template #colSelectTp>
  <div class="lv-filter-select">
    <div class="lv-filter-select-container">
      <div class="lv-filter-select-list" style="max-height: 4rem;">
        <ng-container *ngFor="let item of columns">
          <div
            class="lv-filter-select-item lv-filter-select-multiple"
            [ngClass]="{ selected: item.isShow }"
            (click)="toggleAlarmSelect(item)"
          >
            <label lv-checkbox [(ngModel)]="item.isShow" lvControl></label>
            <span class="lv-filter-text">{{ item.label }}</span>
          </div>
        </ng-container>
      </div>
    </div>
  </div>
</ng-template>

<ng-template #dateFilterTpl>
  <lv-date-range-picker
    lvShowTime="true"
    lvInline="true"
    [(ngModel)]="rangeDate"
  ></lv-date-range-picker>
  <div class="range-picker-operate">
    <lv-group lvGutter="8px">
      <button lv-button lvType="primary" (click)="selectDate(rangeDate)">
        {{ 'common_ok_label' | i18n }}
      </button>
      <button lv-button (click)="cancelDate()">
        {{ 'common_cancel_label' | i18n }}
      </button>
    </lv-group>
  </div>
</ng-template>

<ng-template #clusterNodeTpl let-data>
  <lv-group lvDirection="vertical" lvGutter="4px">
    <div class="sub-title">{{ data.nodeRole | textMap: 'nodeRole' }}</div>
    <div>{{ data.label }}</div>
    <lv-group lvGutter="12px" class="alarm-summary">
      <div>
        <span class="alarm-level-dot"></span>
        <span>{{ data.critical }}</span>
      </div>
      <div>
        <span class="alarm-level-dot"></span>
        <span>{{ data.major }}</span>
      </div>
      <div>
        <span class="alarm-level-dot"></span>
        <span>{{ data.warning }}</span>
      </div>
    </lv-group>
  </lv-group>
</ng-template>

<ng-template #alarmHelpTpl>
  <span [innerHtml]="alarmHelp"></span>
</ng-template>
